<!--     这个组件主要使用在新增注册证部分    -->
<!--     用来上传   <<<单个图片文件>>>>     -->
<!--     或者你也可以在别的地方使用    -->
<!--     但是不要删除原来的代码，你可以加参数等    -->
<!--     但是不要删不要删不要删！！！    -->
<!--     改的时候考虑一下会不会影响其他页面的功能！！    -->
<!--     把功能给我改坏了，我会去找你的！！！！    -->
<!--     发现私自改的坏的，腿打折！！！！    -->

<template>
  <div class="upload-file-image-box">
    <div>
      <div
        v-if="imagesurlstr"
        class="dialog-upload">
        <div style="display:flex; justify-content: center;">
          <el-image
            style="width: 150px; height: 100px;"
            fit="cover"
            :src="imagesurlstr" />
        </div>
        <div class="pdfright">
          <el-upload
            action="string"
            :show-file-list="false"
            :accept="imageLimit"
            :http-request="toRequest"
            fit="scale-down"
          >
            <el-button
              size="mini"
              type="text text-primary">重新上传</el-button>
          </el-upload>
        </div>
      </div>
      <!-- 上传 -->
      <div
        v-else
        class="upload-box">
        <el-upload
          action="string"
          :show-file-list="false"
          :accept="imageLimit"
          :http-request="toRequest"
          fit="scale-down"
        >
          <div class="tip-box">
            <div class="tip-uplader">
              <i class="el-icon-plus avatar-uploader-icon" />
            </div>
            <div>（支持PNG、JPG格式文件上传，文件限制4M以内）</div>
          </div>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import { fileUpload } from '../../const/api.js'
// 文件上传限制 ------- 图片类型
// const imageLimit = 'image/jpg,image/png'
export default {
  name: 'PictureUpload',
  props: {
    // 跟单独调用没有关系，该值为了配合表单组件使用
    keystr: {
      type: String,
      default: () => ''
    },
    imgsrc: {
      type: String,
      default: () => ''
    }
  },

  data () {
    return {
      imageLimit: '.jpg, .png',
      // 该值为了配合表单组件使用
      key: this.keystr || '',
      imagesurlstr: this.imgsrc || ''
    }
  },
  methods: {
    toRequest (data) {
      // 图片拦截
      let typeList = ['png', 'jpg', 'PNG', 'JPG']
      let FileType = data.file.name.split('.')

      const isImage = typeList.includes(FileType[1])
      if (!isImage) {
        this.$message.error('上传文件只能是PNG、JPG格式!')
        return false
      }
      const isLt4M = data.file.size / 1024 / 1024 < 4
      if (!isLt4M) {
        this.$message.error('上传文件大小不能超过 4MB!')
        return false
      }
      // 发起请求
      let fd = new FormData()
      fd.append('file', data.file)
      this.$axios({
        method: 'post',
        url: fileUpload,
        headers: { 'Content-Type': 'multipart/form-data' },
        data: fd
      }).then(res => {
        this.$message({ type: 'success', message: '上传成功' })
        // 赋值上传后的地址给文档
        this.imagesurlstr = res.data.payload
        this.$emit('ReturnImgUrl', this.imagesurlstr, this.key)
      })
    }
  },

  watch: {
    imgsrc: {
      immediate: true,
      handler (val) {
        this.imagesurlstr = val
      }
    }
  }
}
</script>

<style lang="less">
.upload-file-image-box {
  .dialog-upload {
    border: 1px solid #cdd2dc;
    width: 220px;
    padding-top: 10px;

    .pdfright {
      display: flex;
      justify-content: center;
    }
  }
  .upload-box {
    border: 1px solid #cdd2dc;
    width: 210px;
    font-size: 12px;
    padding: 10px 2px;
    .tip-box {
      display: flex;
      flex-direction: column;
      justify-items: center;
      align-items: center;
      .tip-uplader {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 1px solid #cdd2dc;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
